<template>
    <div>
        <SvgIcon name="rank" @click="visible = true" class="icon_rank" />
        <el-dialog class="rank_dialog" v-model="visible" title="排行榜">
            <ul class="rank_wrap" v-infinite-scroll="load">
                <li class="rank_title">
                    <div>排名</div>
                    <div>头像</div>
                    <div>昵称</div>
                    <div>分数</div> 
                </li>
                <li v-for="item in list" :key="item.num">
                    <div>{{ item.num }}</div>
                    <div> <el-image :src="item.avatar" alt="" /></div>
                    <div>{{ item.name }}</div>
                    <div>{{ item.label }}</div>
                </li>
                <li v-if="isFinished" class="nomore">没有更多了</li>
            </ul>
        </el-dialog>
    </div>
</template>
<script setup lang="ts">
import { Game } from "@/api/interface"
import { getGameRank } from "@/api/modules/game"
const visible = ref(false)
const route = useRoute()
const isFinished = ref(false)
const isLoading = ref(false)
const list = ref<Game.GameRankData[]>([])
const pager = reactive({
    page: 1,
    size: 20,
    total: 0
})


const load = async () => {
    if (isFinished.value || isLoading.value) {
        return
    }
    isLoading.value = true
    const { data } = await getGameRank({ game_id: route.query.id as string, page: pager.page, size: pager.size })
    const { list: _list, ...assets } = data;
    list.value = list.value?.concat(_list);
    isFinished.value = _list.length >= assets.total
    isLoading.value = false
    Object.assign(pager, assets)
}

</script>



<style lang="scss">
.icon_rank {
    cursor: pointer;
    position: absolute;
    right: 2vmin;
    top: 50%;
    transform: translateY(-50%);
    z-index: 99;
}

.rank_dialog {
    min-width: 375px;

    ul {
        li {
            display: flex;
            white-space: nowrap;
            margin: 10px 0;

            div {
                width: 60px;

                &:nth-child(3) {
                    flex: 1;
                }

                .el-image {
                    width: 70%;
                    border-radius: 8px;
                }
            }
        }
    }

    .nomore {
        font-size: 12px;
        text-align: right;
        color: #666;
        justify-content: center;
    }
}
</style>
